<template>
  <el-card class="box-card">
    <div class="text item">
      <el-cascader
        v-model="newValue"
        :options="list"
        :props="{ expandTrigger: 'hover', checkStrictly: true}"
        placeholder="选择分类名"
        clearable
        filterable
        :show-all-levels="false"
      />
    </div>
  </el-card>
</template>

<script>
import { getDouHao } from '@/utils/util'
export default {
  props: {
    list: {
      type: Array,
      required: false,
      default() {
        return []
      }
    },
    value: {
      type: String,
      required: false,
      default() {
        return ''
      }
    }
  },
  computed: {
    newValue: {
      get() {
        console.log('父传子', this.value)
        if (this.value && this.value !== '') {
          return getDouHao(this.value, [])
        }
        return []
      },
      set(value) {
        this.$emit('input', value[value.length - 1])
      }
    }
  },
  watch: {
    newValue: {
      handler(value) {
        console.log('分类数组变化时', value)
      },
      deep: true
    },
    list: {
      handler(value) {
        console.log(value)
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-cascader{
    width: 100%;
  }
</style>
